<template>
  <div class="generate-page" v-if="tool">
    <h2>{{ tool.name }} - 内容生成</h2>
    <form @submit.prevent="handleGenerate" class="generate-form">
      <div v-for="field in tool.inputFields" :key="field.name" class="form-group">
        <label :for="field.name">{{ field.label }}</label>
        <template v-if="field.type === 'select'">
          <select :id="field.name" v-model="formData[field.name]">
            <option v-for="option in field.options" 
                    :key="option" :value="option">
              {{ option }}
            </option>
          </select>
        </template>
        <template v-else-if="field.type === 'textarea'">
          <textarea :id="field.name" 
                   v-model="formData[field.name]">
          </textarea>
        </template>
        <template v-else>
          <input :type="field.type" 
                 :id="field.name" 
                 v-model="formData[field.name]">
        </template>
      </div>
      <button type="submit" class="generate-btn">生成内容</button>
    </form>
    <div v-if="generatedContent" class="generated-content">
      <h3>生成结果：</h3>
      <div class="content-box">{{ generatedContent }}</div>
    </div>
  </div>
</template>

<script>
import { tools } from '@/data/tools'

export default {
  name: 'GenerateContent',
  data() {
    return {
      tool: null,
      formData: {},
      generatedContent: ''
    }
  },
  created() {
    const toolId = parseInt(this.$route.params.id)
    this.tool = tools.find(t => t.id === toolId)
    this.initFormData()
  },
  methods: {
    initFormData() {
      this.tool.inputFields.forEach(field => {
        this.formData[field.name] = ''
      })
    },
    handleGenerate() {
      // 这里模拟生成内容的过程
      this.generatedContent = `基于您的输入，这里是${this.tool.name}生成的示例内容。\n实际项目中这里会调用后端API。`
    }
  }
}
</script>

<style lang="scss" scoped>
.generate-page {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;

  h2 {
    text-align: center;
    margin-bottom: 2rem;
  }
}

.generate-form {
  .form-group {
    margin-bottom: 1.5rem;

    label {
      display: block;
      margin-bottom: 0.5rem;
    }

    input, select, textarea {
      width: 100%;
      padding: 0.8rem;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1rem;
    }

    textarea {
      height: 150px;
      resize: vertical;
    }
  }

  .generate-btn {
    width: 100%;
    padding: 1rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.2s;

    &:hover {
      background-color: #45a049;
    }
  }
}

.generated-content {
  margin-top: 2rem;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 10px;

  .content-box {
    white-space: pre-wrap;
    padding: 1rem;
    background: white;
    border-radius: 5px;
    margin-top: 1rem;
    border: 1px solid #ddd;
  }
}
</style> 